﻿
@{
    ViewBag.Title = "订单管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<section class="layui-larry-box">
    <div class="larry-personal">
        <div class="layui-tab">
            <blockquote class="layui-elem-quote order_search">
                @*
                    <div class="layui-inline">
                         <a class="layui-btn layui-btn-normal orderAdd_btn">添加订单</a>
                     </div>
                *@
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-danger batchDel">批量删除</a>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-mid layui-word-aux">本页面刷新后除新添加的文章外所有操作无效，关闭页面所有数据重置</div>
                </div>
                <div class="layui-inline">
                    <span class="layui-form-mid">共有<span style="font-weight: bold"> @ViewBag.TotalCount </span>条数据</span>
                </div>
            </blockquote>

            <!-- 操作日志 -->
            <div class="layui-form order_list">
                <table class="layui-table">
                    <colgroup>
                        <col width="5%">
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead id="orders">
                        <tr>
                            <th>
                                <input name="" lay-skin="primary" lay-filter="allChoose" id="allChoose" type="checkbox">
                                <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                    <i class="layui-icon"></i>
                                </div>
                            </th>
                            <th>订单编号</th>
                            <th>收件人</th>
                            <th>收件人手机号</th>
                            <th>订单状态</th>
                            <th>付款金额</th>
                            <th>付款方式</th>
                            <th>发票类型</th>
                            <th>收货地址</th>
                            <th>快递公司</th>
                            <th>买家留言</th>
                            <th>下订单时间</th>
                            <th>订单详细</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody class="order_content">
                        @*<tr>
                                <td>
                                    <input name="checked" lay-skin="primary" lay-filter="choose" type="checkbox">
                                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
                                </td>
                                <td>07920792</td>
                                <td>隔壁老王</td>
                                <td>18379234422</td>
                                <td>已付款</td>
                                <td>100</td>
                                <td>支付宝</td>
                                <td>电子发片</td>
                                <td>江西省九江市xxx区</td>
                                <td>东风快递</td>
                                <td>麻烦快点发货，急用哦！！</td>
                                <td>2018-8-8</td>
                                <td>
                                    <a class="layui-btn layui-btn-mini order_detailed"><i class="iconfont icon-edit"></i> 查看订单详细</a>
                                </td>
                                <td>
                                    <a class="layui-btn layui-btn-mini order_edit"><i class="iconfont icon-edit"></i> 编辑</a>
                                    <a class="layui-btn layui-btn-danger layui-btn-mini order_del" data-id="1">
                                        <i class="layui-icon"></i> 删除
                                    </a>
                                </td>
                            </tr>*@

                    </tbody>
                </table>
                <div class="larry-table-page clearfix">
                    <div id="page" class="page"></div>
                </div>
            </div>

        </div>
    </div>

</section>
@section FooterScript{
    <script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>

    <script id="order_template" type="text/html">
        {{each orders as order}}
        <tr>
            <td>
                <input name="checked" lay-skin="primary" lay-filter="choose" type="checkbox">
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
            </td>
            <td>{{order.guid}}</td>
            <td>{{order.reciverName}}</td>
            <td>{{ order.phoneNum }}</td>
            <td>{{ order.statusName }}</td>
            <td>{{ order.amount }}</td>
            <td>{{ order.payWayName }}</td>
            <td>{{ order.receiptName }}</td>
            {{if order.reciverAddress !=null }}
            <td title="{{ order.completeAddress }}">{{ order.completeAddress.length > 13 ? order.completeAddress.substring(0,12)+" ...":order.completeAddress }}</td>
            {{else}}
            <td>订单未支付</td>
            {{/if}}
            <td>{{ order.express }}</td>
            <td>{{ order.leaveWord }}</td>
            <td>{{ order.createDateTime }}</td>
            <td>
                <a href="/OrderRecord/Index/{{order.id}}" target="_blank" class="layui-btn layui-btn-mini" data-id="{{ order.id }}"><i class="iconfont icon-edit"></i> 查看订单详细</a>
            </td>
            <td>
                <a class="layui-btn layui-btn-mini order_edit" data-id="{{ order.id }}"><i class="iconfont icon-edit"></i> 编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-mini order_del" data-id="{{ order.id }}">
                    <i class="layui-icon"></i> 删除
                </a>
            </td>
        </tr>
        {{/each}}
    </script>

    <script type="text/javascript">
    // 定义一个变量用来存储分页数
    var count = parseInt(Math.ceil( @ViewBag.TotalCount / 10));

    var appConfig = {
        name: "order",    //需要和页面名称对应
        title: "订单",    //显示的名称
        addUrl: "/Order/AddNew",   //添加弹框的路径
        editUrl: "/Order/Edit?id=",      //修改弹框的路径
        $: "",
        layer: "",
        area: ['100%', '900px'],   //弹出层的宽高

        //批量删除Ajax
        batchDel: function (data) {
        @* Array data 得到的是 需要删除的id *@
            $ = appConfig.$

            $.ajax({
                url: "/Order/BatchDel",
                method: "post",
                dataType: "json",
                data: { "orderIds": data },    @* data要删除的数组 *@
                traditional: true,//这里设置为true
                success: function (res) {
                    if (res.status == "ok") {
                        appConfig.layer.msg("删除成功", {
                            icon: 1, time: 2000, end: function () {
                                location.reload();
                            }
                        });



                    } else {
                        appConfig.layer.msg("删除失败", {
                            icon: 5, time: 2000, end: function () {
                                location.reload();
                            }
                        });
                    }
                },
                error: function () {
                    appConfig.layer.msg("网络请求失败", {
                        icon: 5, time: 2000, end: function () {
                            location.reload();
                        }
                    });
                }
            })
        },
        // 软删除
        del: function (data) {

            console.log(data);
            $ = appConfig.$
            //todo:在此处添加删除记录的ajax
            $.ajax({
                url: "/Order/Delete/",
                method: "post",
                dataType: "json",
                data: { "orderId": data },
                success: function (res) {
                    if (res.status == "ok") {
                        appConfig.layer.msg("删除成功", { icon: 1 });

                    } else {
                        appConfig.layer.msg("删除失败", { icon: 5 });
                    }
                },
                error: function () {
                    appConfig.layer.msg("删除失败", { icon: 5 });
                }
            });
        },



    };
        layui.use(['jquery', 'layer', 'element', 'laypage','form'], function () {
        window.jQuery = window.$ = layui.jquery;
        window.layer = layui.layer;
        var element = layui.element(),
            laypage = layui.laypage;
        var form = layui.form()
            , laytpl = layui.laytpl;


            function loadOrderData(curr) {
                var index = layer.msg('订单加载中，请稍候', { icon: 16, time: false, shade: 0.8 });
            $.ajax({
                method: "post",
                dataType: "json",
                url: "/Order/List",
                data: { currentPage: curr },
                success: function (res) {

                    if (res.status == "ok") {

                        var html = template("order_template", { orders: res.data });

                        $(".order_content").html(html);
                        form.render('checkbox');
                        layer.close(index);

                    } else {
                        layer.msg(res.errorMsg, { icon: 5 });
                    }


                },
                error: function () {
                    layer.msg("网络请求失败", { icon: 5 });
                }
            });
        }

        $(function () {
            loadOrderData(1);
        });

        laypage({
            cont: 'page',
            pages: count, //总页数

            groups: 5, //连续显示分页数

            jump: function (obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                var curr = obj.curr; // 获取当前页数下标

                if (!first) {
                    loadOrderData(curr);
                }
            }
        });

    });
    </script>
}